import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/home/model/xin_he_goods_item_entity.dart';
import 'package:xin_he/utils/xh_styles.dart';

import '../../../routes/xin_he_routes.dart';
import '../../../utils/xin_he_image.dart';
import '../../home/views/xin_he_goods_grid_widget.dart';
import '../../shopping_car/models/xin_he_goods_model.dart';
import 'xin_he_seller_shop_logic.dart';

class XinHeSellerShopPage extends StatelessWidget {
  XinHeSellerShopPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeSellerShopLogic());
  final state = Get.find<XinHeSellerShopLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(children: [
           SizedBox(height: Get.mediaQuery.padding.top,),
           ///navi
           Container(
          alignment: Alignment.centerLeft,
          height: 44,
          child: Row(children: [
            GestureDetector(
              onTap: (){
                Get.back();
              },
              child: Container(
                height: 44,
                width: 40,
                color: Colors.transparent,
                alignment: Alignment.center,
                child: const XinHeAssetImage(
                  'assets/images/home/app_back_3.png',
                  width: 9.5,
                  height: 17,
                  fit: BoxFit.cover,),
              ),
            ),
            const SizedBox(width: 5,),
            const XinHeAssetImage('assets/images/home/shop_logo.png',width:42.5 ,height: 42.5,),
            const SizedBox(width: 5,),
            Text('店铺名称',style: TextStyle(color: XinHeStyle.mainBalckFontColor,fontSize: 17,fontWeight: FontWeight.bold),),
          ],),
        ),

        ///search
        Container(
          padding: const EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 12),
          height: 35+22,
          color: Colors.white,
          child: Container(
              width: Get.width - 30,
              decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
              alignment: Alignment.center,
              child:Row(children: [
                const Padding(
                  padding: EdgeInsets.only(left: 10,right: 5),
                  child: XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
                ),

                Expanded(
                  child: TextField(
                    controller: logic.editingController,
                    onChanged: (value){
                      logic.inputChange(value);
                    },
                    onSubmitted: (value){
                      logic.onInputSubmitAction();
                    },

                    onEditingComplete: logic.onInputEditCompleteAction,
                    maxLines: 1,
                    // maxLength: 15,
                    style:   TextStyle(fontSize: 14,color: XinHeColor('#15161F')),
                    decoration:  InputDecoration(
                        hintText:  '请输入商品名',
                        hintStyle: TextStyle(fontSize: 14,color: XinHeColor('#B1B1B1') ),
                        filled: true,
                        fillColor:  XinHeColor('#F7F8F9'),
                        border: const OutlineInputBorder(
                          // borderRadius: BorderRadius.all(Radius.circular(8)),
                          borderSide:  BorderSide(color: Colors.transparent),
                        ),
                        enabledBorder:  const OutlineInputBorder(
                          // borderRadius: BorderRadius.all(Radius.circular(8)),
                          borderSide:  BorderSide(color: Colors.transparent),
                        ),
                        focusedBorder:  const OutlineInputBorder(
                          // borderRadius: BorderRadius.all(Radius.circular(8)),
                          borderSide:  BorderSide(color: Colors.transparent),
                        ),
                        disabledBorder:  const OutlineInputBorder(
                          // borderRadius: BorderRadius.all(Radius.circular(8)),
                          borderSide:  BorderSide(color: Colors.transparent),
                        ),
                        contentPadding: const EdgeInsets.only(top: 0,bottom: 0,left: 0,right: 15)
                    ),
                    // inputFormatters: [LengthLimitingTextInputFormatter(15)],
                  ),
                ),

                ///一键清除文本
                state.isShowDelete.value
                    ? GestureDetector(
                  onTap: (){
                    logic.clearInputContent();
                  },
                  child: Container(
                    // padding: EdgeInsets.all(3),
                    margin: const EdgeInsets.only(left: 8),
                    height: 20,
                    width: 20,
                    child: const XinHeAssetImage('assets/images/home/input_delete.png',width: 20,height: 20,fit: BoxFit.fill,),

                  ),
                )
                    :Container(),

                GestureDetector(
                  onTap: (){
                    logic.onInputEditCompleteAction();
                  },
                  child: Container(
                    width: 54,
                    height: 33,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16.5),
                    ),
                    child:  Text('搜索',style: TextStyle(color: XinHeStyle.mainGreenColor,fontSize: 14,fontWeight: FontWeight.w500),),
                  ),
                ),
              ],)
            // Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
          ),

        ),


        const SizedBox(height: 10,),

        Container(
            height: 36,
            margin: const EdgeInsets.symmetric(horizontal: 15).copyWith(bottom: 10),
            alignment: Alignment.centerLeft,
            child: Text('热销榜',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 15,fontWeight: FontWeight.bold),)),

        Container(
          height: 200,
          width: Get.width,
          margin: const EdgeInsets.symmetric(horizontal: 15),
          padding: const EdgeInsets.symmetric(horizontal: 15,).copyWith(top:0),
          decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10)),
          child: GridView.builder(
            shrinkWrap: true,
            padding: const EdgeInsets.symmetric(horizontal: 0),
            scrollDirection: Axis.horizontal,
            gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 1,
                mainAxisSpacing: 15,
                childAspectRatio: 200/95
            ),
            itemBuilder: (ctx,index){
              return GestureDetector(
                onTap: (){
                  Get.toNamed(XinHeRoutes.goodsDetail);
                },
                child: Stack(children: [
                  _prefectureItemView(),
                 index<3?  Positioned(
                    left: 7,
                      top: 15,
                      child: XinHeAssetImage('assets/images/home/rank_${index}.png',width:18 ,height: 24,)):Container(),
                ],),
              );
            },
            itemCount: 15,
          ),
        ),
        
        Container(
           height: 36,
            margin: const EdgeInsets.symmetric(horizontal: 15),
            alignment: Alignment.centerLeft,
            child: Text('全部商品',style: TextStyle(color: XinHeColor('#2B3131'),fontSize: 15,fontWeight: FontWeight.bold),)),

        _bottomItemListView(),


      ],),
    );
  }

  Widget _bottomItemListView(){
    return Container(
      width: Get.width-30,
      padding: const EdgeInsets.only(left: 15,right: 15),
      child: GridView.builder(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        padding: const EdgeInsets.symmetric(horizontal: 0),
        scrollDirection: Axis.vertical,
        gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 9.5,
            crossAxisSpacing: 10.5,
            childAspectRatio: 167.5/255.5
        ),
        itemBuilder: (ctx,index){
          return GestureDetector(
            onTap: (){
              Get.toNamed(XinHeRoutes.goodsDetail);
            },
            child: XinHeGoodsGridWidget(model: XinHeGoodsItemEntity(),onTapCallback: (){
              logic.addGoodsToCartAction(XinHeGoodsModel());
            },),
          );
        },
        itemCount: 15,
      ),
    );
  }

  Widget _prefectureItemView() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(top: 15,bottom: 15),
      alignment: Alignment.centerLeft,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,

        children: [

          Container(
            width: 95,
            height: 95,
            decoration: BoxDecoration(
              color: Colors.yellow,
              borderRadius: BorderRadius.circular(5),
            ),
            child: XinHeAssetImage('assets/images/home/tmp.png',fit: BoxFit.fill,),
          ),

          const SizedBox(height: 3,),
          Container(
            alignment: Alignment.centerLeft,
            height: 23,
            // padding: const EdgeInsets.symmetric(horizontal: 4),
            child: Text(
              '特级初榨橄榄的'.replaceAll("", "\u{200B}"),
              style: TextStyle(fontSize: 13,color: XinHeColor('#2B3131')),
              softWrap: false,
              overflow: TextOverflow.ellipsis,
            ),
          ),

          Text('纯正有机山茶油',style: TextStyle(color: XinHeColor('#A9AEAF'),fontSize:12,fontWeight: FontWeight.w500 ),),
          const SizedBox(height: 6,),
          ///  价格
          RichText(
              text: TextSpan(children: [
                ///￥
                TextSpan(
                  text: '￥',
                  style: TextStyle(
                    color: XinHeColor('#E84128'),
                    fontSize: 9,
                    fontWeight: FontWeight.w500,
                  ),
                ),

                ///
                TextSpan(
                  text: '28.83',
                  style: TextStyle(
                    color: XinHeColor('#E84128'),
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),

              ]
              )),

        ],
      ),
    );
  }


}
